<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragments/custom_base::commonHead"></th:block>
    <th:block th:replace="fragments/custom_link::home-css"></th:block>
    <th:block th:replace="fragments/custom_link::home-js"></th:block>
    <style>

    </style>
</head>
<body>
<th:block th:replace="fragments/custom_base::commonNav"></th:block>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md-offset2 layui-col-sm-offset2 layui-col-md8 layui-col-sm8">
            <div class="layui-col-md3 layui-col-sm3">
                <th:block th:replace="fragments/custom_base::userCenterMenu"></th:block>
            </div>
            <div class="layui-col-md9 layui-col-sm9">
                <div class="user-center-content">
                    <div class="user-center-content-title">[[${title}]]</div>
                    <div class="user-center-content-body">

                        <form class="layui-form" action="" method="post">

                            <div class="layui-form-item" style="margin-top: 12px;">
                                <label class="layui-form-label">用户ID：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="id" disabled readonly th:value="${userInfo.id}" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">手机号：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="phone" disabled readonly th:value="${userInfo.phone}" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <label class="layui-form-label">昵称：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" th:value="${userInfo.nickname}" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">性别：</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="0" title="保密" th:checked="${userInfo.sex=='0'}"></input>
                                    <input type="radio" name="sex" value="1" title="男" th:checked="${userInfo.sex=='1'}">
                                    <input type="radio" name="sex" value="2" title="女" th:checked="${userInfo.sex=='2'}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="email" th:value="${userInfo.email}" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">所在地：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="address" th:value="${userInfo.address}" lay-verify="required" placeholder="请输入所在地,例子：江苏 常州" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="save">保存资料</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:replace="fragments/custom_base :: commonFooter"></th:block>
</body>
<th:block th:replace="fragments/custom_base :: commonScript"></th:block>
<script type="application/javascript">
    layui.use(['form'], function(){
        var form = layui.form;
        //监听提交
        form.on('submit(save)', function(data){
            // 提交表单的逻辑 ajax
            $.ajax({
                url: '/users/save_setting',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.status == 200) {
                        layer.msg(result.message, {icon: 1, time: 1000}, function () {
                            //刷新页面
                            window.location.reload();
                        })
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1000})
                    }
                }
            })
            return false;
        });
    });
</script>
</html>